// @ts-ignore
import DatGui, { DatSelect, DatNumber, DatString } from "react-dat-gui";


type DataGuiProps = {
  name: string;
  data: Record<string, any>;
  onUpdate: (data: Record<string, any>) => void;
}
export default function DataGuiPanel({ data, onUpdate }: DataGuiProps) {
  let mappedData: {path: string, label: string, value: any}[] = []
  const dataKeys = Object.keys(data);
  mappedData = dataKeys.map((key) => ({
    path: key,
    label: key,
    value: data[key],
  }))
  return (
    <DatGui data={data} onUpdate={onUpdate}>
       {
        mappedData.map((item) => {
            if(typeof item.value === "number") {
                return <DatNumber path={item.path} label={item.label} value={item.value}></DatNumber>
            }
            if(typeof item.value === "string") {
                return <DatString path={item.path} label={item.label} value={item.value}></DatString>
            }
            if(Array.isArray(item.value)) {
                return <DatSelect path={item.path} label={item.label} options={item.value}></DatSelect>
            }
            return <DatString path={item.path} label={item.label} value={item.value}></DatString>
        })
       }
    </DatGui>
  )
}
